<!-- 分类组件、商品集合组件的商品展示 -->
<template>
  <view class="itemType-list" :class="listData.showType == 'horizontal' ? 'horizontal-scroll' : 'vertical-scroll'">
    <view class="shopitem-vertical u-bg-color" v-if="itemData">
      <block v-for="(item, index) in newlistResult" :key="index">
        <!-- 单个商品展示宽度宽度 100%-->
        <view v-if="listData.width == '100'" class="listing-banner" @click.stop="jumpPage(item)">
          <view class="image_box" :data-itemId="item.itemId" :data-valueId="item.valueId"
            :data-valueName="item.valueName">
            <!-- 新品和线上专供 -->
            <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
            <block v-if="listData.showMajorUrl == '0' ">
              <image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" />
            </block>
            <block v-else>
              <image mode="widthFix" :src="item.majorUrl" />
            </block>
          </view>

          <view class="cos-goods" :class="item.pointsRateDisplay?'ts-tag':''">
            <!-- 显示促销 -->
            <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0">
              <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                <!-- 会员提前购 -->
                <view v-if="promotionItem.promotionType == 'forward_purchase'">
                  <view v-if="
                        filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                          filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                      ">
                    <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                  </view>
                </view>
                <view
                  v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                  <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                    <span class="goodsTag">{{ promotionItem.promotionTag + ' ' }}</span>
                  </view>
                </view>
              </block>
            </view>
            <!-- 促销 -->
            <!-- 名称和价格 -->
            <block v-if="listData.showItemName == '1'">
              <view class="cos-product_info">
                <view class="product_name ellipsis" :class="item.pointsRateDisplay?'ts-tag':''">{{ item.itemName }}
                </view>
              </view>
            </block>

            <!-- 现价低于划线价，显示划线价  -->
            <block
              v-if="listData.showItemPrice == '1' && (!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">

              <!-- 毫升数 -->
              <view class="color-sub"
                v-if="(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">
                {{item.propertyName + ':'}}{{item.valueName}}
              </view>

              <view class="price" :class="item.pointsRateDisplay?'ts-tag':''"><label
                  class="rmb">¥</label>{{filterChecked.moneyFormat(item.price / 1, 2)}}</view>

            </block>
            <view v-if="!!item.activitySelection && item.activitySelection.dateStatus" class="activity_status"
              :class="[item.activitySelection.joinStatus=='开放登记信息'?'red':item.activitySelection.joinStatus=='等待公布结果'?'green':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">
              {{!!item.activitySelection ? item.activitySelection.joinStatus : ''}}
            </view>
            <view class="activity_btn" :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if="!!item.activitySelection && item.activitySelection.dateStatus" @click.stop="jumpPage(item)">查看活动详情
            </view>

            <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>

            <!-- 自定义标签 -->
            <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
              <block v-for="(promotionItem, index) in item.customPromotionTags" :key="index">
                <view v-if="promotionItem.promotionType == 'custom_tag'">
                  <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                    <span class="customGoodsTag"
                      :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + '   ' }}&#32;</span>
                  </view>
                </view>
              </block>
            </view>

            <!--收藏，快速加购 开始-->
            <view class="btnContainer" style="display: none;">
              <!--已收藏显示实心-->
              <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                <i class="svg_favON"
                  :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                  :data-text="item.itemId + '_' + item.valueId" @click="cancelFavorite" />
              </view>
              <view v-else>
                <view v-if="userLogin">
                  <view v-if="favoritesList[item.itemId - item.valueId]">
                    <i class="svg_favON"
                      :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                      :data-text="item.itemId + '_' + item.valueId" @click="cancelFavorite" />
                  </view>
                  <view v-else>
                    <i class="svg_favOFF" @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                      :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId" />
                  </view>
                </view>
                <view class="item" v-else>
                  <button class="svg_favOFF" open-type="getUserInfo" @getuserinfo="favGotUserInfoToRegister"
                    :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"></button>
                </view>
              </view>

              <!--仅上架商品显示加购-->
              <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                <view v-if="userLogin">
                  <i @click="quickPurchase(item.itemId, item.valueId)" class="iconfont icon-cos_cart"
                    :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId" />
                </view>
                <view v-else>
                  <button class="iconfont icon-cos_cart" open-type="getUserInfo"
                    @getuserinfo="addcartGotUserInfoToRegister"
                    :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"></button>
                </view>
              </view>
            </view>
            <!--收藏，快速加购 结束-->
          </view>
        </view>

        <!-- 单个商品展示宽度50% -->
        <view v-if="listData.width == '50'" class="list u-bg-color-white" @click.stop="jumpPage(item)">
          <view class="image_box" :data-itemId="item.itemId" :data-valueId="item.valueId"
            :data-valueName="item.valueName">
            <!-- 新品和线上专供 -->
            <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
            <block v-if="listData.showMajorUrl == '0' ">
              <image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" />
            </block>
            <block v-else>
              <image mode="widthFix" :src="item.majorUrl" />
            </block>
          </view>

          <view class="cos-goods">
            <!-- 显示促销 -->
            <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
              <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                <!-- 会员提前购 -->
                <view v-if="promotionItem.promotionType == 'forward_purchase'">
                  <view v-if="filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                          filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                      ">
                  </view>
                </view>
                <view
                  v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                  <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                  </view>
                </view>
              </block>
            </view>
            <!-- 促销 -->

            <!-- 名称和价格 -->
            <block v-if="listData.showItemName == '1'">
              <view class="cos-product_info"
                v-if='(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)'>
                <view class="product_name ellipsis">{{ item.itemName }}</view>
              </view>
              <view class="activity_name ellipsis"
                :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
                v-if='!!item.activitySelection && item.activitySelection.dateStatus'>{{item.itemName}}</view>
            </block>
            <view class="activity_date" :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']"
              v-if="!!item.activitySelection && item.activitySelection.dateStatus">
              {{item.activitySelection.dateStatus }}
            </view>

            <view class="color-sub"
              v-if="(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)">
              {{item.propertyName + ':'}}{{item.valueName}}
            </view>
            <!-- 现价低于划线价，显示划线价  -->
            <block
              v-if="listData.showItemPrice == '1' && (!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus) ">
              <view class="markPrice" v-if="item.markingPrice / 1 > item.price / 1">

                <view class="price">
                  <text class="mark">¥</text>
                  {{ filterChecked.moneyFormat(item.price / 1, 2) }}
                </view>
              </view>
              <view v-else>
                <view class="price">
                  <text class="mark">¥</text>
                  {{ filterChecked.moneyFormat(item.price / 1, 2) }}
                </view>
              </view>
              <!-- 会员提前购标签 -->
            </block>
            <view v-if="!!item.activitySelection && item.activitySelection.dateStatus" class="activity_status"
              :class="[item.activitySelection.joinStatus=='开放登记信息'?'red':item.activitySelection.joinStatus=='等待公布结果'?'green':'',iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">
              {{!!item.activitySelection ? item.activitySelection.joinStatus : ''}}
            </view>
            <view class="activity_btn" v-if="!!item.activitySelection && item.activitySelection.dateStatus"
              :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">查看活动详情</view>

            <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>


            <!-- 自定义标签 -->
            <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
              <block v-for="(promotionItem, index) in item.customPromotionTags" :key="index" class="saleBox">
                <view v-if="promotionItem.promotionType == 'custom_tag'">
                  <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                    <span class="customGoodsTag"
                      :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + '   ' }}&#32;</span>
                  </view>
                </view>
              </block>
            </view>

            <!--收藏，快速加购 开始-->
            <view class="btnContainer" style="display: none;">
              <!--已收藏显示实心-->
              <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                <i class="svg_favON"
                  :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                  :data-text="item.itemId + '_' + item.valueId" @click="cancelFavorite" />
              </view>
              <view v-else>
                <view v-if="userLogin">
                  <view v-if="favoritesList[item.itemId - item.valueId]">
                    <i class="svg_favON"
                      :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                      :data-text="item.itemId + '_' + item.valueId" @click="cancelFavorite" />
                  </view>
                  <view v-else>
                    <i class="svg_favOFF" @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                      :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId" />
                  </view>
                </view>
                <view class="item" v-else>
                  <button class="svg_favOFF" open-type="getUserInfo" @getuserinfo="favGotUserInfoToRegister"
                    :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"></button>
                </view>
              </view>

              <!--仅上架商品显示加购-->
              <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                <view v-if="userLogin">
                  <i @click="quickPurchase(item.itemId, item.valueId)" class="iconfont icon-cos_cart"
                    :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId" />
                </view>
                <view v-else>
                  <button class="iconfont icon-cos_cart" open-type="getUserInfo"
                    @getuserinfo="addcartGotUserInfoToRegister"
                    :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"></button>
                </view>
              </view>
            </view>
            <!--收藏，快速加购 结束-->
          </view>
        </view>
        <!-- 单个商品展示宽度 50% End -->

        <!-- 单个商品展示宽度33% -->
        <view v-if="listData.width == '33'" class="list-three" @click.stop="jumpPage(item)" :data-itemId="item.itemId"
          :data-valueId="item.valueId" :data-valueName="item.valueName">
          <view class="image_box">
            <!-- 新品和线上专供 -->
            <view class="newTag" v-if="filterChecked.fliterFrontTag(item.frontTag, 'NEW')">新品</view>
            <block v-if="listData.showMajorUrl == '0' ">
              <image mode="widthFix" :src="item.hoverUrl ? item.hoverUrl : item.majorUrl" />
            </block>
            <block v-else>
              <image mode="widthFix" :src="item.majorUrl" />
            </block>
          </view>

          <view class="cos-goods">
            <!-- 显示促销 -->
            <view v-if="item.promotionTagList !== null && item.promotionTagList.length > 0" class="saleBox">
              <block v-for="(promotionItem, index) in item.promotionTagList" :key="index">
                <!-- 会员提前购 -->
                <view v-if="promotionItem.promotionType == 'forward_purchase'">
                  <view v-if="
                        filterChecked.forwardPurchaseTag(promotionItem.memberLevelIds, memberLevelId, memberIsActive) &&
                          filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)
                      ">
                  </view>
                </view>
                <view
                  v-if="promotionItem.promotionType !== 'forward_purchase' && promotionItem.promotionType !== 'custom_tag'">
                  <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                  </view>
                </view>
              </block>
            </view>
            <!-- 促销 -->

            <!-- 名称和价格 -->
            <block v-if="listData.showItemName == '1'">
              <view class="cos-product_info"
                v-if='(!item.activitySelection || !!item.activitySelection && !item.activitySelection.dateStatus)'>
                <view class="product_name ellipsis">{{ item.itemName }}</view>
              </view>
              <view class="activity_name ellipsis" v-if='!!item.activitySelection && item.activitySelection.dateStatus'
                :class="[iphoneModel == 1?'iphoneMax':iphoneModel == 2?'iphone12':'']">{{item.itemName}}</view>
            </block>
            <!-- 现价低于划线价，显示划线价  -->
            <block v-if="listData.showItemPrice == '1'">

              <view class="price"><label class="rmb">¥</label>{{ filterChecked.moneyFormat(item.price / 1, 2) }}</view>
            </block>

            <view class="marker-text" v-if="filterChecked.fliterFrontTag(item.frontTag, 'ONLINE EXCLUSIVE')">线上专享</view>

            <!-- 自定义标签 -->
            <view v-if="item.customPromotionTags !== null && item.customPromotionTags.length > 0">
              <block v-for="(promotionItem, index) in item.customPromotionTags" :key="index" class="saleBox">
                <view v-if="promotionItem.promotionType == 'custom_tag'">
                  <view v-if="filterChecked.filterCustomerGroupPromotionTag(promotionItem.groupIds, groupId)">
                    <span class="customGoodsTag"
                      :style="{ color: promotionItem.tagStyle }">{{ promotionItem.promotionTag + '   ' }}&#32;</span>
                  </view>
                </view>
              </block>
            </view>

            <!--收藏，快速加购 开始-->
            <view class="btnContainer" style="display: none;">
              <!--已收藏显示实心-->
              <view v-if="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)">
                <i class="svg_favON"
                  :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                  :data-text="item.itemId + '_' + item.valueId" @click="cancelFavorite" />
              </view>
              <view v-else>
                <view v-if="userLogin">
                  <view v-if="favoritesList[item.itemId - item.valueId]">
                    <i class="svg_favON"
                      :data-value="filterChecked.productInWishList(childFavoriteItemIds, item.itemId + '_' + item.valueId)"
                      :data-text="item.itemId + '_' + item.valueId" @click="cancelFavorite" />
                  </view>
                  <view v-else>
                    <i class="svg_favOFF" @click="addFavorites(item.frontCode, item.itemId, item.valueId)"
                      :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId" />
                  </view>
                </view>
                <view class="item" v-else>
                  <button class="svg_favOFF" open-type="getUserInfo" @getuserinfo="favGotUserInfoToRegister"
                    :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"></button>
                </view>
              </view>
              <!--仅上架商品显示加购-->
              <view v-if="item.approveStatus === 'onsale' && item.frontQty > 0">
                <view v-if="userLogin">
                  <i @click="quickPurchase(item.itemId, item.valueId)" class="iconfont icon-cos_cart"
                    :data-id="'heart_' + item.frontCode + '_' + item.itemId + '_' + item.valueId" />
                </view>
                <view v-else>
                  <button class="iconfont icon-cos_cart" open-type="getUserInfo"
                    @getuserinfo="addcartGotUserInfoToRegister"
                    :data-text="item.frontCode + '_' + item.itemId + '_' + item.valueId"></button>
                </view>
              </view>
            </view>
            <!--收藏，快速加购 结束-->
          </view>
        </view>
        <!-- 单个商品展示宽度 33% End -->

      </block>
      <view v-if="showMore" class="hasMore">已到页面底部</view>
      <!--加载更多时动画-->
      <loadMore :show.sync="showLoading" message="加载中" style="width: 100%;"></loadMore>
    </view>
    <!-- 上下滑动 End -->

    <!--尺码选择器 开始-->
    <view v-if="showSizeList" class="topSizeList">
      <view class="bg" catchtouchmove="preventTouchMove"></view>
      <view class="sizeBox">
        <view class="cascade_header">
          <text class="quxiao" @click="cancelPicker">取消</text>
          <text class="queren" @click="onSizePick">确认</text>
        </view>
        <picker-view :value="defaultValue" indicator-style="height: 50px;"
          style="width: 100%; height: 300px;background-color: #fff;" @change="bindChange">
          <picker-view-column>
            <view>选择尺码</view>
            <view v-for="(item, index) in colorSizeList" :key="index">
              {{ item.skuProperties[1].valueName }}
              <text v-if="item.qty < 1">已售罄</text>
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
    <!--尺码选择器 结束-->

    <!--加购成功商品提示框开始-->
    <view v-if="addCartSuccess" class="topBox">
      <view class="iconfont icon-cuowu1" @click="closeMiniCart"></view>
      <view class="gContent">
        <view class="gImg">
          <image :src="skuImageUrl"></image>
        </view>
        <view class="gInfo">
          <view class="gNmae">{{ itemName }}</view>

          <view class="price">{{ '¥ ' + price / 1 }}</view>
        </view>

        <view class="gColor">颜色 {{ colorName }}</view>
        <view>尺码 {{ sizeName }}</view>
      </view>
    </view>

  </view>
  <!--加购成功商品提示框结束-->
  </view>
</template>

<script module="filterChecked" lang="wxs" src="../../../utils/filter.wxs"></script>

<script>
  import util from '@/utils/util.js'
  import loadMore from '@/components/common/loadMore';
  import cmsParse from '../wxparse.vue'
  export default {
    props: {
      listData: Object,
      itemData: Array,
      showLoading: {
        type: Boolean,
        default: false
      },
      hasMore: {
        type: Number,
        default: 0
      },
    },
    components: {
      loadMore,
      cmsParse
    },
    data() {
      return {
        nowPages: '',
        identifier: '',
        showMore: false,
        newlistResult: [],
        iphoneModel: 0,
        pageName: '',
      }
    },

    mounted() {
      let that = this;
      let pages = getCurrentPages();
      var currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
      this.identifier = currPage.options.identifier;
      let isIos = uni.getSystemInfoSync().system.indexOf('iOS')
      let platform = uni.getSystemInfoSync().model

      if (isIos == 0) {
        if (platform.indexOf('12') !== -1 || platform.indexOf('13') !== -1) {
          if (platform.indexOf('Max') !== -1) {
            this.iphoneModel = 1
          } else {
            this.iphoneModel = 2
          }
        }
      }
      if (this.nowPages == "pages/search/search") {
        this.pageName = '搜索'
      } else if (this.nowPages == "pages/cart/cart") {
        this.pageName = '购物车'
      } else if (this.nowPages == "pages/order/list") {
        this.pageName = '订单列表'
      } else if (this.nowPages == "pages/order/details") {
        this.pageName = '订单详情'
      } else if (this.nowPages == "pages/item/item") {
        this.pageName = '商品详情'
      } else if (this.nowPages == "pages/item/categoryNew") {
        this.pageName = '酒窖'
      } else if (this.nowPages == "pages/home/home") {
        this.pageName = '首页'
      }
    },
    methods: {
      //抽签时间控制
      async drawControl(arr) {
        let that = this
        let listArr = arr
        for (let i = 0; i < listArr.length; i++) {
          if (listArr[i].activitySelection) {
            that.$commonFunction.timeStatus(listArr[i]).then(res => {
              listArr[i].activitySelection.dateStatus = res.dateStatus
              listArr[i].activitySelection.joinStatus = res.joinStatus
            }).catch(err => {})
          }
        }
        this.newlistResult = listArr
        setTimeout(() => {
          this.$parent.$parent.closeLoading()
        }, 
        10);
      },

      timeStatus(item) {
        let nowTime = new Date().getTime()
        let drawStartTime = item.activitySelection.activitySelectionStartTime
        let drawEndTime = item.activitySelection.activitySelectionEndTime
        let promulgateTime = item.activitySelection.promulgateTime
        let buyEndTime = item.activitySelection.buyEndTime
        let activityStopTime = item.activitySelection.activityStopTime
        let obj = {}
        let showTime;
        let showText;
        if (nowTime < drawStartTime) {
          showTime = util.timeFormat(drawStartTime) + ' 开始登记'
          showText = '未开放登记信息'
        } else if (nowTime > drawStartTime && nowTime < drawEndTime) {
          showTime = util.timeFormat(drawEndTime) + ' 登记结束'
          showText = '开放登记信息'
        } else if (nowTime > drawEndTime && nowTime < promulgateTime) {
          showTime = util.timeFormat(promulgateTime) + ' 公布结果'
          showText = '等待公布结果'
        } else if (nowTime > promulgateTime && nowTime < buyEndTime) {
          showTime = util.timeFormat(buyEndTime) + ' 活动结束'
          showText = '结果已公布'
        } else if (nowTime > buyEndTime && nowTime < activityStopTime) {
          showTime = util.timeFormat(buyEndTime) + ' 活动结束'
          showText = '活动已结束'
        } else {
          showTime = ''
          showText = ''
        }
        obj.dateStatus = showTime
        obj.joinStatus = showText
        return obj
      },
      jumpPage(item) {
        let that = this;
        let itemId = item.itemId || item.goodsId;
        let valueId = item.valueId;
        let valueName = item.valueName;
        let clTrackPrams = {
          'c_from': this.nowPages + this.pageName,
          'c_product_name': item.itemName,
          'c_product_brand': '麦卡伦 Macallan',
          'c_product_price': item.price,
          'c_product_year': '',
          'c_product_series': '',
          'c_product_scenarios': '',
          'c_product_taste': '',
          'c_product_alcoholconcentration': '',
          'c_product_volume': item.valueName,
          'c_product_id': item.itemId,
        }
        getApp().commonClTrack('c_ebmp_click_search_recommend', clTrackPrams)
          uni.navigateTo({
            url: "/pages/item/item?id=" +
              itemId +
              "&valueId=" +
              valueId + "&hasExpose=true"
          })
      },

      /**
       * 加入收藏
       * @param frontCode
       * @param itemId
       * @param valueId
       */
      addFavorites(frontCode, itemId, valueId) {
        let that = this;
        // that.appendFavorites(frontCode,itemId,valueId);
      },

      // 取消收藏
      cancelFavorite(e) {
        let that = this;
        let favoriteId = e.currentTarget.dataset.value;
        let textArr = e.currentTarget.dataset.text;
        let itemArr = textArr.split('_');

        // that.favoritesList[itemArr[0]-itemArr[1]] = '';
        // that.delFavorite(favoriteId);
      },

      /**
       * 快速购买
       */
      quickPurchase(itemId, valueId) {
        let that = this;
        // that.valueId = valueId;
        // that.getGoodsDetail(itemId);
      },

      /**
       * @param {Object} e
       * 点击加入购物车授权
       */
      addcartGotUserInfoToRegister(e) {
        let that = this;
        let productAttr = e.currentTarget.dataset.text; //0753256001_19034_41
        let attrArr = productAttr.split('_');

        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            let clTrackPrams = {
              'c_answer': 'YES',
              'c_location': 'cms/productList'
            }
            getApp().commonClTrack('c_ebmp_auth_nick', clTrackPrams)

            // that.onGotUserInfoToRegister(res);
          },
          fail: (res) => {
            //拒绝授权头像昵称埋点
            let clTrackPrams = {
              'c_answer': 'NO',
              'c_location': 'cms/productList'
            }
            getApp().commonClTrack('c_ebmp_auth_nick', clTrackPrams)

            tip.plainText('您可以再次授权')
          },
        })
      },

      /**
       * 授权 点击收藏
       * @param e
       */
      favGotUserInfoToRegister(e) {
        let that = this;
        // that.clickType = 'favorite';
        let productAttr = e.currentTarget.dataset.text; //0753256001_19034_41
        let attrArr = productAttr.split('_');
        // that.clickAttrArr = productAttr.split('_');

        wx.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            // that.onGotUserInfoToRegister(e);
          },
          fail: (res) => {
            tip.plainText('您可以再次授权')
          },
        })
      },

    },
  }
</script>

<style lang="less">
  page {
    background-color: #fff;
  }

  .shopitem-vertical {
    display: flex;
    flex-wrap: wrap;
    padding: 0 2%;
    width: 100%;
    justify-content: space-between;

    .listing-banner {
      width: 100%;
      display: flex;
      margin: 0 0 15rpx 0;
      background-color: #fff;

      .image_box {
        width: 280rpx;

        .sale-out {
          height: 48rpx;
          background: rgba(174, 174, 174, 0.698);
          color: #fff;
          position: absolute;
          width: 100%;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 24rpx
        }
      }

      .cos-goods {
        text-align: left;
        padding: 30rpx 24rpx 0;
        width: 440rpx;

        &.ts-tag {
          padding: 20rpx 24rpx 0;
        }

        .product_name {
          padding: 0;
          margin: 0 0 39rpx 0;
          font-size: 28rpx;
          line-height: 44rpx;
          color: #010101;

          &.ts-tag {
            margin: 0 0 20rpx 0;
          }
        }

        .color-sub {
          font-size: 24rpx;
        }

        .price {
          color: #000;
          font-size: 31rpx;
          padding-top: 18rpx;

          &.ts-tag {
            padding-top: 2rpx;
          }

          .rmb {
            font-size: 28rpx;
          }
        }

        .goodsTag {
          display: none;
        }
      }
    }
  }


  // 左右滑动
  .shopitem-horizontal {
    background: #fff;
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 30rpx;

    // 单个商品宽度为100%
    .listing-banner {
      width: 100%;
      padding-right: 20rpx;
    }
  }

  .shopitem-horizontal .listing-banner:last-child {
    padding-right: 0rpx;
  }


  // 上下 && 左右滑动 宽50% start
  .list,
  .listing-banner {
    display: inline-block;
    vertical-align: top;
    // width: 47.3%;
    margin-bottom: 2.3%;
    width: 48.94%;
    // margin: 0 10rpx 20rpx;
    overflow: hidden;

    .image_box {
      // position: relative;
      overflow: hidden;
      font-size: 0;

      image {
        width: 100%;
        opacity: 1;
      }
    }

    .cos-goods {
      /* width:348rpx; */
      padding-bottom: 20rpx;
      text-align: center;

      // 色块
      .colorBlock {
        display: flex;
        flex-wrap: wrap;

        .skuImageUrl {
          margin: 0 12rpx 0 0;
          padding: 4px 0 1rpx;
          width: 26rpx;
          height: 26rpx;

          image {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }

      // 名称和价格
      .product_name {
        line-height: 46rpx;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        font-size: 28rpx;
        padding: 0 20rpx;
        margin: 20rpx 0 16rpx 0;
      }

      .activity_name {
        line-height: 46rpx;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        font-size: 28rpx;
        // font-weight: 600;
        padding: 0 20rpx;
        margin: 20rpx 0 16rpx 0;
        text-align: left;
      }

      .activity_date {
        line-height: 24rpx;
        font-size: 22rpx;
        padding: 0rpx 14rpx 0 20rpx;
        text-align: left;
      }

      .activity_status {
        padding: 20rpx;
        color: rgb(181, 181, 181);
        font-size: 24rpx;
        text-align: left;

        &.green {
          color: rgb(90, 166, 138);
        }

        &.red {
          color: rgb(156, 81, 91);
        }
      }

      .activity_btn {
        margin: 0 20rpx;
        background-color: #000;
        color: #fff;
        text-align: center;
        font-size: 24rpx;
        height: 58rpx;
        line-height: 58rpx;
      }

      .color-sub {
        color: #aeaeae;
        line-height: 24rpx;
        padding-bottom: 16rpx;
        font-size: 12px;
      }

      // 划线价
      .markPrice {
        display: flex;
        padding-top: 6rpx;
        justify-content: center;

        .linePrice {
          text-decoration: line-through;
          text-align: left;
          line-height: 32rpx;
          font-size: 32rpx;
        }

        .nowPrice {
          margin-left: 10rpx;
          color: #862633;
          text-align: left;
          font-size: 32rpx;
          line-height: 32rpx;
        }
      }

      .price {
        line-height: 32rpx;
        font-size: 32rpx;
      }
    }

    .mark {
      line-height: 14px;
      font-size: 14px;
      margin-right: 2rpx;
    }
  }

  // .list:nth-child(even) {
  //     margin-right: 0;
  // }
  // 上下滑动 宽50% end

  // 上下 && 左右滑动 宽33% start
  .list-three,
  .listing-banner {
    width: 30%;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 4px 1.5% 30rpx 1.5%;

    .image_box {
      position: relative;

      image {
        display: block;
        width: 100%;
        opacity: 1;
        height: 246.667px;
      }
    }

    .cos-goods {
      padding-bottom: 20rpx;

      // 色块
      .colorBlock {
        display: flex;
        flex-wrap: wrap;

        .skuImageUrl {
          margin: 0 12rpx 0 0;
          padding: 4px 0 1rpx;
          width: 26rpx;
          height: 26rpx;

          image {
            width: 24rpx;
            height: 24rpx;
          }
        }
      }

      // 名称和价格
      .product_name {
        font-size: 24rpx;
        font-weight: 400;
        order: 1;
        margin-top: 18rpx;
        line-height: 28rpx;
        color: #444;
      }

      // 划线价
      .markPrice {
        display: flex;
        padding-top: 6rpx;

        .linePrice {
          text-decoration: line-through;
          color: #444444;
          font-weight: 600;
          text-align: left;
          font-size: 24rpx;
        }

        .nowPrice {
          margin-left: 10rpx;
          color: #ff571a;
          font-weight: 600;
          text-align: left;
          font-size: 24rpx;
        }
      }

      .price {
        padding-top: 6rpx;
        color: #000;
        text-align: left;
      }
    }
  }

  // 上下滑动 宽33% end


  // 上下 && 左右滑动 宽度 100%

  // 左右滑动宽度 50%
  .listing-banner {
    .image_box {
      position: relative;

      image {
        display: block;
        width: 100%;
        // width: 348rpx;
        // height: 348rpx !important;
        opacity: 1;
      }
    }
  }

  .marker-text {
    color: #bb762b;
    font-size: 24rpx;
  }

  // 材质标签
  .tag2 {
    color: #8d9aab;
  }

  // 新品标签
  .tagBox {
    display: flex;

    .gTag {
      font-size: 20rpx;
      padding: 3rpx 16rpx;
      z-index: 1;
      font-family: syNORMAL;
      display: inline-block;
      margin: 11rpx 10rpx 0 0;
    }
  }

  // new标签和cos线上一致
  .newTag {
    font-family: Gill Sans MT Pro;
    font-weight: 400;
    letter-spacing: 0.0825em;
    position: absolute;
    top: 16rpx;
    left: -8rpx;
    padding: 0 16rpx;
    color: #ffffff;
    background-color: #b89978;
    z-index: 1;
    font-size: 18rpx;
    line-height: 36rpx;
  }

  // 新品标签End

  // 促销
  .saleBox {
    display: flex;
    justify-content: left;
    line-height: 36rpx;
    flex-flow: row wrap;
    margin: 10rpx 0 -10rpx;
  }

  .saleBox label {
    color: #ff571a;
    font-size: 24rpx;
    margin-right: 30rpx;
  }

  // 收藏
  .btnContainer {
    display: flex;
  }

  .btnContainer .iconheart-default {
    margin: 4rpx 24rpx 0 0;
    display: block;
  }

  .btnContainer .iconheart-activation {
    margin: 6rpx 14rpx 0 0;
    display: block;
  }

  .btnContainer .icon-bag-o {
    font-size: 36rpx;
    /*line-height: 76rpx;*/
  }

  .svg_favOFF,
  .svg_favON {
    background-size: 36rpx 34rpx;
    width: 40rpx;
    height: 40rpx;
    margin: 7rpx 16rpx 0 0;
    padding-right: 0;
  }

  .icon-cos_cart {
    font-size: 34rpx;
    margin-top: 3rpx;
    display: block;
    color: #666;
    background-color: #fff;
    line-height: 42rpx;
    padding: 0;
  }

  /* 尺码弹框 */
  .topSizeList {
    position: fixed;
    bottom: 110rpx;
    left: 0;
    z-index: 10;
    height: 610rpx;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #ddd;
  }

  .topSizeList .bg {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 10;
  }

  .topSizeList picker-view-column view {
    line-height: 100rpx;
    text-align: center;
  }

  .topSizeList .cascade_header {
    margin: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    width: auto;
    background-color: #fff;
  }

  .topSizeList .sizeBox {
    position: relative;
    z-index: 12;
  }

  .quxiao,
  .queren {
    line-height: 80rpx;
  }

  .quxiao {
    color: #939393;
  }

  /* 加购弹框 */
  .topBox {
    border: 1px solid #e7e7e7;
    background-color: #fff;
    padding: 60rpx;
    position: fixed;
    top: 30%;
    left: 2.9%;
    width: 77.8%;
  }

  .topBox .gImg {
    width: 236rpx;
    height: 354rpx;
    margin-right: 60rpx;
  }

  .topBox .gImg image {
    width: 100%;
    height: 100%;
  }

  .topBox .gInfo {
    padding-top: 20rpx;
  }

  .topBox .gNmae {
    margin-bottom: 10rpx;
  }

  .topBox .gColor {
    margin: 60rpx 0 10rpx 0;
  }

  .topBox .gContent {
    display: flex;
    margin-bottom: 60rpx;
  }

  .topBox .icon-bag-o {
    background-color: #444;
    color: #fff;
    padding: 10px 20rpx;
    text-align: center;
    font-size: 28rpx;
  }

  .topBox .icon-bag-o:before {
    content: '';
  }

  .topBox .icon-bag-o:after {
    content: '\e603';
  }

  .topBox .icon-cuowu1 {
    position: absolute;
    right: 16rpx;
    top: 16rpx;
    font-size: 64rpx;
    color: #999;
  }

  .goodsTag {
    color: #ff571a !important;
    font-size: 24rpx;
    margin-right: 14rpx;
  }

  .customGoodsTag {
    font-size: 24rpx;
  }

  .hasMore {
    margin-bottom: 48rpx;
    font-size: 12px;
    color: #444;
    width: 100%;
    text-align: center;
    margin-top: 36rpx;
  }
</style>
